@import '../../../asset/scss/mixin/export.scss';

.calendar{
    position:relative;
    width:10rem;
    transform: translate3d(0,0,0);
    .month{
        background: #fff;
        position:absolute;
        width:10rem;
        top:0;
        .total{
            font-size: $fontNs;
            margin:0;
            span{
                display: inline-block;
                width: 1.42rem;
                text-align: center;
                color: $energized;
            }
        }
        .week{
            display: table-row;
            li{
                display: table-cell;
                width:1.42rem;
                text-align: center;
                height: $pt20;
                vertical-align: middle;
                font-size: $fontNs;
            }
            li:first-child,li:last-child{
                color: $grayLl;
            }
        }
        .days{
            height: 7rem;
            @include flex();
            @include align(stretch,stretch);
            -webkit-box-direction: normal;
            -webkit-box-orient: vertical;
            -moz-flex-direction: column;
            -webkit-flex-direction: column;
            flex-direction: column;
            .row{
                @include flex();
                @include justify(justify,space-between);
                // display: table-row;
                li{
                    // display: table-cell;
                    width: 1.42rem;
                    text-align: center;
                    padding: $pt10 0;
                    opacity: 0;
                    span{
                        display: block;
                    }
                    .date{
                        font-size: $fontNs;
                        line-height: $fontNs;
                        margin-bottom:1px;
                    }
                    .lunar{
                        font-size: $fontSss;
                        line-height: $fontSss;
                    }
                }
                li:first-child,li:last-child{
                    color: $grayLl;
                }
                li.inLoan{
                    background: url('/static/img/calendar_cell_gray_bg.png') no-repeat center center;
                    background-size: 72%;
                }
                li.inMonth{
                    opacity: 1;
                }
                li.loanDay,li.repayDay{
                    .lunar{
                        color: $energized;
                    }
                }
                li.today{
                    background: url('/static/img/loan_calendar_today_bg.png') no-repeat center center;
                    background-size: 80%;
                    color: $white;
                }
                li.overdue{
                     background: url('/static/img/loan_calendar_overdue_bg.png') no-repeat center center;
                      background-size: 64%;
                    .lunar{
                        color: $white;
                    }
                }
            }
        }
    }
}